<template>
  <div>
    <a-config-provider :locale="locale">
      <a-watermark :content="formData.applyCode.componentProp.defaultValue" :font="{color: '#c2c2c2'}">
      <div style="font-size: 14pt; margin-bottom: 10px">编号：{{ formData.applyCode.componentProp.defaultValue }}</div>
      <div style="
          font-size: 18pt;
          text-align: center;
          font-weight: bolder;
          margin-bottom: 40px;
        ">
        中电信翼康科技有限公司员工离职通知单
      </div>
      <div style="
          font-size: 12pt;
          text-align: right;
          font-weight: bolder;
          margin-bottom: 10px;
        ">
        人力-LZ-2024-
      </div>
      <a-form ref="vForm" :model="formData">
        <div style="display: flex; line-height: 30px; margin-bottom: 30px">
          <a-form-item :label="formData.applyUserName.label" class="hideLabel" :name="[
            formData.applyUserName.field,
            'componentProp',
            'defaultValue',
          ]" v-if="!formData.applyUserName.componentProp.hidden" :rules="formData.applyUserName.rules">
            <a-input v-model:value="formData.applyUserName.componentProp.defaultValue"
              :disabled="formData.applyUserName.componentProp.disabled"
              :placeholder="formData.applyUserName.componentProp.placeholder" />
          </a-form-item>
          同志已批准于
          <a-form-item :label="formData.endTime.label" class="hideLabel"
            :name="[formData.endTime.field, 'componentProp', 'defaultValue']"
            v-if="!formData.endTime.componentProp.hidden" :rules="formData.endTime.rules">
            <a-date-picker style="width: 100%" v-model:value="formData.endTime.componentProp.defaultValue"
              :disabled="formData.endTime.componentProp.disabled"
              :placeholder="formData.endTime.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
              format="YYYY年MM月DD日" /> </a-form-item>办理离职，请相关部门协助办理离职有关事宜。
        </div>
        <div style="text-align: right; margin-bottom: 10px">
          人力资源部（盖章）
        </div>
        <div style="text-align: right">
          <a-form-item :label="formData.applyTime.label" class="hideLabel"
            :name="[formData.applyTime.field, 'componentProp', 'defaultValue']"
            v-if="!formData.applyTime.componentProp.hidden" :rules="formData.applyTime.rules">
            <a-date-picker style="width: 20%" v-model:value="formData.applyTime.componentProp.defaultValue"
              :disabled="formData.applyTime.componentProp.disabled"
              :placeholder="formData.applyTime.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
              format="YYYY年MM月DD日" />
          </a-form-item>
        </div>
        <table border="1" cellspacing="0" cellpadding="0" style="width: 100%" class="yk_table">
          <tr>
            <td colspan="3" class="fontStyle">部门</td>
            <td colspan="5" class="fontStyle">项目</td>
            <td colspan="3" class="fontStyle">部门意见（盖章）</td>
          </tr>
          <tr>
            <td colspan="3">员工所在部门</td>
            <td colspan="5">
              工作交接情况：
              <a-form-item :label="formData.reason.label" class="hideLabel" :name="[
                formData.reason.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.reason.componentProp.hidden" :rules="formData.reason.rules">
                <a-textarea v-model:value="formData.reason.componentProp.defaultValue"
                  :disabled="formData.reason.componentProp.disabled"
                  :placeholder="formData.reason.componentProp.placeholder" />
              </a-form-item>
            </td>
            <td colspan="3">
              <a-form-item :label="formData.applayUserDeptContent.label" class="hideLabel" :name="[
                formData.applayUserDeptContent.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.applayUserDeptContent.componentProp.hidden" :rules="formData.applayUserDeptContent.rules">
                <a-textarea v-model:value="formData.applayUserDeptContent.componentProp.defaultValue"
                  :disabled="formData.applayUserDeptContent.componentProp.disabled"
                  :placeholder="formData.applayUserDeptContent.componentProp.placeholder" />
              </a-form-item>
              <div style="text-align: right; margin-top: 50px">
                <a-form-item :label="formData.applayUserDeptDate.label" class="hideLabel" :name="[
                  formData.applayUserDeptDate.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.applayUserDeptDate.componentProp.hidden" :rules="formData.applayUserDeptDate.rules">
                  <a-date-picker style="width:70%" v-model:value="formData.applayUserDeptDate.componentProp.defaultValue
                    " :disabled="formData.applayUserDeptDate.componentProp.disabled"
                    :placeholder="formData.applayUserDeptDate.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
                    format="YYYY年MM月DD日" />
                </a-form-item>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">综合管理部</td>
            <td colspan="5">
              <ul>
                <li>1. 电脑</li>
                <li>2. 注销邮箱、OA（MSS系统）、企业微信、翼支付、生产调度系统账号，停发携程疗休养，出入证移交</li>
                <li>3. 党/团组织关系转出</li>
                <li>4. 其他事项</li>
              </ul>
            </td>
            <td colspan="3">
              <a-form-item :label="formData.synthesisContent.label" class="hideLabel" :name="[
                formData.synthesisContent.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.synthesisContent.componentProp.hidden" :rules="formData.synthesisContent.rules">
                <a-textarea v-model:value="formData.synthesisContent.componentProp.defaultValue"
                  :disabled="formData.synthesisContent.componentProp.disabled"
                  :placeholder="formData.synthesisContent.componentProp.placeholder" />
              </a-form-item>
              <div style="text-align: right; margin-top: 50px">
                <a-form-item :label="formData.synthesisDate.label" class="hideLabel" :name="[
                  formData.synthesisDate.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.synthesisDate.componentProp.hidden" :rules="formData.synthesisDate.rules">
                  <a-date-picker style="width:70%" v-model:value="formData.synthesisDate.componentProp.defaultValue
                    " :disabled="formData.synthesisDate.componentProp.disabled"
                    :placeholder="formData.synthesisDate.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
                    format="YYYY年MM月DD日" />
                </a-form-item>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">财务部</td>
            <td colspan="5">
              <ul>
                <li>1. 已无个人借款或未处理预付款</li>
                <li>2. 已无在途财务流程</li>
              </ul>
            </td>
            <td colspan="3">
              <a-form-item :label="formData.financeContent.label" class="hideLabel" :name="[
                formData.financeContent.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.financeContent.componentProp.hidden" :rules="formData.financeContent.rules">
                <a-textarea v-model:value="formData.financeContent.componentProp.defaultValue"
                  :disabled="formData.financeContent.componentProp.disabled"
                  :placeholder="formData.financeContent.componentProp.placeholder" />
              </a-form-item>
              <div style="text-align: right; margin-top: 50px">
                <a-form-item :label="formData.financeDate.label" class="hideLabel" :name="[
                  formData.financeDate.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.financeDate.componentProp.hidden" :rules="formData.financeDate.rules">
                  <a-date-picker style="width:70%" v-model:value="formData.financeDate.componentProp.defaultValue
                    " :disabled="formData.financeDate.componentProp.disabled"
                    :placeholder="formData.financeDate.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
                    format="YYYY年MM月DD日" />
                </a-form-item>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">人力资源部</td>
            <td colspan="5">
              <ul>
                <li>1. 工资关系、人事档案转出（调档函）</li>
                <li>2. 工资结算，社保公积金、补充医疗保险、意外保险减员</li>
                <li>3. 劳动合同解除协议（离职证明）</li>
              </ul>
            </td>
            <td colspan="3">
              <a-form-item :label="formData.humanContent.label" class="hideLabel" :name="[
                formData.humanContent.field,
                'componentProp',
                'defaultValue',
              ]" v-if="!formData.humanContent.componentProp.hidden" :rules="formData.humanContent.rules">
                <a-textarea v-model:value="formData.humanContent.componentProp.defaultValue"
                  :disabled="formData.humanContent.componentProp.disabled"
                  :placeholder="formData.humanContent.componentProp.placeholder" />
              </a-form-item>
              <div style="text-align: right; margin-top: 50px">
                <a-form-item :label="formData.humanDate.label" class="hideLabel" :name="[
                  formData.humanDate.field,
                  'componentProp',
                  'defaultValue',
                ]" v-if="!formData.humanDate.componentProp.hidden" :rules="formData.humanDate.rules">
                  <a-date-picker style="width:70%" v-model:value="formData.humanDate.componentProp.defaultValue
                    " :disabled="formData.humanDate.componentProp.disabled"
                    :placeholder="formData.humanDate.componentProp.placeholder" type="date" value-format="YYYY-MM-DD"
                    format="YYYY年MM月DD日" />
                </a-form-item>
              </div>
            </td>
          </tr>
        </table>
        <div style="margin-top: 10pt;">
          <ul>
            <li>注 1. 各部门可结合工作实际增减事项，如有必要可复印此表；</li>
            <li style="margin-left: 14pt;">2. 请本人于3个工作日内将此通知单签毕交于人力资源部。</li>
          </ul>
        </div>
      </a-form>
      </a-watermark>
    </a-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import dayjs from "dayjs";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
const vForm = ref();
const locale = ref(zhCN);
const formData = reactive({
  applyCode: {
    type: "input",
    field: "applyCode",
    label: "编号",
    rules: [{ required: false }],
    componentProp: {
      defaultValue: '${applyCode}',
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  role: {
    type: 'input',
    field: 'role',
    label: '申请人角色（隐藏）',
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserRole}",
      disabled: false,
      hidden: false,
      placeholder: ""
    }
  },
  applyUserName: {
    type: "input",
    field: "applyUserName",
    label: "申请人",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserName}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  applyUserId: {
    type: "input",
    field: "applyUserId",
    label: "申请人ID",
    rules: [{ required: true }],
    componentProp: {
      defaultValue: "${applyUserId}",
      disabled: false,
      hidden: false,
      placeholder: "",
    },
  },
  reason: {
    type: "textarea",
    field: "reason",
    label: "交接情况",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请输入",
      defaultValue: "",
      disabled: false,
      hidden: false,
    },
  },
  applyTime: {
    type: "datepicker",
    field: "applyTime",
    label: "办理时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请输入",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  endTime: {
    type: "datepicker",
    field: "endTime",
    label: "离职时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请输入",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  applayUserDeptContent: {
    type: "textarea",
    field: "applayUserDeptContent",
    label: "部门意见",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "同意办理离职（调出）",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  applayUserDeptDate: {
    type: "datepicker",
    field: "applayUserDeptDate",
    label: "部门签名时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请输入",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  synthesisContent: {
    type: "textarea",
    field: "synthesisContent",
    label: "综合管理部意见",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "同意办理离职（调出）",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  synthesisDate: {
    type: "datepicker",
    field: "synthesisDate",
    label: "综合管理部签名时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请输入",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  financeContent: {
    type: "textarea",
    field: "financeContent",
    label: "财务部意见",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "同意办理离职（调出）",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  financeDate: {
    type: "datepicker",
    field: "financeDate",
    label: "财务部签名时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请输入",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  humanContent: {
    type: "textarea",
    field: "humanContent",
    label: "人力资源部意见",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "同意办理离职（调出）",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  },
  humanDate: {
    type: "datepicker",
    field: "humanDate",
    label: "人力资源部签名时间",
    rules: [{ required: true }],
    componentProp: {
      placeholder: "请输入",
      defaultValue: "",
      disabled: false,
      hidden: false,
      option: [],
    },
  }
});
const submitForm = () => {
  return vForm.value.validate();
};
defineExpose({
  formData,
  submitForm,
});
</script>

<style scoped>
.yk_table .ant-form-item {
  margin-bottom: 0;
}

.yk_table .ant-input-number {
  width: 100%;
}

.yk_table td {
  padding: 10px;
}

::v-deep .hideLabel .ant-form-item-label {
  display: none !important;
}

::v-deep .formTimedisplay {
  display: inline-block !important;
  width: 100%;
}

::v-deep .formTimeSpan {
  vertical-align: text-top;
  display: inline-block;
  margin: 0 10px;
}

ul li {
  list-style-type: none;
}

.fontStyle {
  text-align: center;
  color: black;
  font-weight: bolder;
}
::v-deep .ant-input-affix-wrapper-disabled,
.ant-input-affix-wrapper[disabled],
.ant-input-disabled,
.ant-input[disabled],
.ant-picker.ant-picker-disabled,
.ant-select-disabled .ant-select:not(.ant-select-customize-input) .ant-select-selector{
  background: #fff !important;
  color: #666 !important;
}
::v-deep input[disabled],.ant-input-number-disabled {
  color: #666 !important;
  background-color: #fff !important;
}
</style>
